<html>
<body>

<!-- Save new event -->
<form method="get" action="/save">
    <input type="text" name="eventName">
    <button type="submit">Save new event</button>
</form>


<!-- Receive saved event -->
<div id="content"></div>

<script>


    let source = new EventSource("save");

    source.addEventListener('message', function (e) {
        console.log('New message is received');
        const index = JSON.parse(e.data);
        const content = `New event added: ${index.name}<br>`;
        document.getElementById("content").innerHTML += content;
    }, false);

    source.addEventListener('open', function(e) {
        console.log('The connection has been opened');
    }, false);

    source.addEventListener('error', function(e) {
        if (e.readyState == EventSource.CLOSED){
            console.log('The connection has been closed');
        }
    }, false);


</script>
</body>
<html>
